{include file=comm/head.html}
<div class="about-page">
    <section>
        <main>
            <div class="navigate">
                <img src="{pboot:sitetplpath}/images/home-smile-line.png" alt="" class="home" />
                <a href=""><span>Home</span></a>
                <img src="{pboot:sitetplpath}/images/arrow-right-s-line.png" alt="" class="arrow" />
                <a href=""><span>About us</span></a>
                <img src="{pboot:sitetplpath}/images/arrow-right-s-line.png" alt="" class="arrow" />
                <span class="active">Company overview</span>
            </div>
        </main>
    </section>
    <section class="section-1">
        <main>
            <div class="company">
                <div class="left">
                    <div class="t0 wow fadeInUpFix" data-wow-duration="0.5s">Company profile</div>
                    <div class="t1">Mi duis egestas arcu senectus orci nisi.</div>
                    <div class="t2">Scelerisque cursus sed tortor, ipsum. Ornare mi sed quis sed eu rhoncus leo vitae. Dui eget eu turpis sit in ac. Sed gravida elementum cras dui quam. Augue gravida ultricies vitae massa a neque. Mattis fringilla tristique tincidunt proin urna interdum lorem. Neque tellus odio nec vitae at massa at.</div>
                </div>
                <div class="right">
                    <div class="swiper-container" id="swiper-company">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="slide-inner" style="background-image:url({pboot:sitetplpath}/images/company-1.jpg)"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="slide-inner" style="background-image:url({pboot:sitetplpath}/images/company-2.jpg)"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="slide-inner" style="background-image:url({pboot:sitetplpath}/images/company-3.jpg)"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="slide-inner" style="background-image:url({pboot:sitetplpath}/images/company-4.jpg)"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="slide-inner" style="background-image:url({pboot:sitetplpath}/images/company-5.jpg)"></div>
                            </div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination swiper-pagination-company"></div>
                    </div>
                </div>
            </div>
            <div class="intro">
                <div class="i1">Ultrices metus donec purus tortor. Nisl id at purus ut tempor ac pharetra. Consequat id nulla nunc etiam. Volutpat at posuere vel tellus urna. Placerat maecenas eu gravida nunc sem.</div>
                <div class="i2">Volutpat amet nullam hac magna ut scelerisque. Platea aliquam adipiscing viverra diam sagittis, ut elementum scelerisque. Et diam imperdiet purus scelerisque. Sit elit elementum, interdum commodo aenean sed. Netus convallis quam penatibus leo. In sapien, donec faucibus vivamus nunc sed. Pharetra, porttitor quam vitae, aliquet. Egestas nibh quam amet scelerisque suspendisse sed. Et, dui odio at posuere luctus dolor. Tempor mauris arcu ac leo tristique donec sed. Faucibus imperdiet amet et odio magnis pulvinar augue. Turpis viverra semper a a tempus sagittis. Commodo nulla sit sapien arcu risus, integer id velit. Ullamcorper suspendisse viverra ornare mauris. Aenean velit in arcu elementum tempus ultrices lorem senectus ut. Enim interdum pharetra ac arcu nec gravida dui tincidunt. A mattis pharetra risus tellus turpis.</div>
            </div>
        </main>
    </section>
    <section class="section-2">
        <main>
            <div class="count">
                <div class="count-item">
                    <div class="num" id="num1">2006</div>
                    <div class="line"></div>
                    <div class="desc">
                        <div>Established </div>
                        <div>In 2006 </div>
                    </div>
                </div>
                <div class="count-item">
                    <div class="num">$<span id="num2">40</span>M+</div>
                    <div class="line"></div>
                    <div class="desc">
                        <div>2018 Sales Revenue: </div>
                        <div>40,370,000 USD </div>
                    </div>
                </div>
                <div class="count-item">
                    <div class="num"><span id="num3">12000</span>+</div>
                    <div class="line"></div>
                    <div class="desc">
                        <div>Product Coverage </div>
                        <div>12,000 Number Of Units</div>
                    </div>
                </div>
                <div class="count-item">
                    <div class="num"><span id="num4">400</span>+</div>
                    <div class="line"></div>
                    <div class="desc">
                        <div>Approximatelyd </div>
                        <div>400 Employees In Total </div>
                    </div>
                </div>
            </div>
        </main>
    </section>
    <section class="section-3">
        <main>
            <div class="about-title wow fadeInUpFix" data-wow-duration="0.5s">Business philosophy</div>
            <div class="list">
                <div class="item">
                    <div class="pic">
                        <img src="{pboot:sitetplpath}/images/bg-01.png" alt="" />
                    </div>
                    <div class="content">
                        <div class="icon">
                            <img src="{pboot:sitetplpath}/images/stack.png" alt="" />
                        </div>
                        <div class="icon-active">
                            <img src="{pboot:sitetplpath}/images/stack-white.png" alt="" />
                        </div>
                        <div class="desc">
                            <span>Sagittis tellus felis </span>
                            <span>sem sed faucibus.</span>
                        </div>
                        <div class="info">
                            Dis mus adipiscing malesuada sit nunc, odio duis. Odio non ut sem velit. Condimentum et nunc, morbi cursus sed diam. Nec cras vitae vitae nisi nunc.
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="{pboot:sitetplpath}/images/bg-02.png" alt="" />
                    </div>
                    <div class="content">
                        <div class="icon">
                            <img src="{pboot:sitetplpath}/images/lightbulb-flash.png" alt="" />
                        </div>
                        <div class="icon-active">
                            <img src="{pboot:sitetplpath}/images/lightbulb-flash-white.png" alt="" />
                        </div>
                        <div class="desc">
                            <span>Sagittis tellus felis </span>
                            <span>sem sed faucibus.</span>
                        </div>
                        <div class="info">
                            Dis mus adipiscing malesuada sit nunc, odio duis. Odio non ut sem velit. Condimentum et nunc, morbi cursus sed diam. Nec cras vitae vitae nisi nunc.
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="{pboot:sitetplpath}/images/bg-03.png" alt="" />
                    </div>
                    <div class="content">
                        <div class="icon">
                            <img src="{pboot:sitetplpath}/images/leaf.png" alt="" />
                        </div>
                        <div class="icon-active">
                            <img src="{pboot:sitetplpath}/images/leaf-white.png" alt="" />
                        </div>
                        <div class="desc">
                            <span>Sagittis tellus felis </span>
                            <span>sem sed faucibus.</span>
                        </div>
                        <div class="info">
                            Dis mus adipiscing malesuada sit nunc, odio duis. Odio non ut sem velit. Condimentum et nunc, morbi cursus sed diam. Nec cras vitae vitae nisi nunc.
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </section>
    <section class="section-4">
        <main>
            <div class="about-title wow fadeInUpFix" data-wow-duration="0.5s">Our values</div>
            <div class="custom-pagination">
                <div class="arrow" id="advantage-l">
                    <img src="{pboot:sitetplpath}/images/arrow-left.png" />
                </div>
                <div class="arrow" id="advantage-r">
                    <img src="{pboot:sitetplpath}/images/arrow-right.png" />
                </div>
            </div>
            <div class="swiper-container" id="Advantage" style="width: 1560px;height: 648px">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" style="overflow: hidden">
                        <div class="slideBg">
                            <img src="{pboot:sitetplpath}/images/values1.jpg" alt="advantage" />
                            <div class="content">
                                <div class="title">Sed semper aenean ut proin. Mattis ornare amet ipsum vitae.</div>
                                <div class="desc">Arcu scelerisque fermentum erat massa eleifend felis blandit dolor netus. Orci, enim phasellus nullam ut fusce porttitor elementum leo. Iaculis non ac diam, arcu. Nunc dui sapien lorem pretium. Ac tortor eget sed sit. Non.</div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide" style="overflow: hidden">
                        <div class="slideBg">
                            <img src="{pboot:sitetplpath}/images/values2.jpg" alt="advantage" />
                            <div class="content">
                                <div class="title">In pulvinar non vitae consequat.</div>
                                <div class="desc">Arcu scelerisque fermentum erat massa eleifend felis blandit dolor netus. Orci, enim phasellus nullam ut fusce porttitor elementum leo. Iaculis non ac diam, arcu. Nunc dui sapien lorem pretium. Ac tortor eget sed sit. Non.</div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </section>
    <section class="section-5">
        <main>
            <div class="title wow fadeInUpFix" data-wow-duration="0.5s">
                Overseas Major Customers
            </div>
            <div class="intro wow fadeInUpFix" data-wow-duration="0.5s" data-wow-delay="0.1s">
                Ultrices metus donec purus tortor. Nisl id at purus ut tempor ac pharetra. Consequat id nulla nunc etiam.
            </div>
            <div class="map">
                <img src="{pboot:sitetplpath}/images/map.png" alt="" />
                <div class="m1 circle wow fadeInUpFix" data-wow-duration="0.8s" data-wow-delay="0.1s">North America</div>
                <div class="m2 circle wow fadeInUpFix" data-wow-duration="0.8s" data-wow-delay="0.2s">Europe</div>
                <div class="m3 circle wow fadeInUpFix" data-wow-duration="0.8s" data-wow-delay="0.3s">CIS</div>
                <div class="m4 circle wow fadeInUpFix" data-wow-duration="0.8s" data-wow-delay="0.4s">South America</div>
                <div class="m5 circle wow fadeInUpFix" data-wow-duration="0.8s" data-wow-delay="0.5s">Afrcia</div>
                <div class="m6 circle wow fadeInUpFix" data-wow-duration="0.8s" data-wow-delay="0.6s">Middle East</div>
                <div class="m7 circle wow fadeInUpFix" data-wow-duration="0.8s" data-wow-delay="0.7s">SEA</div>
                <div class="m8 circle wow fadeInUpFix" data-wow-duration="0.8s" data-wow-delay="0.8s">Japan</div>
            </div>
        </main>
    </section>
    <section class="section-6">
        <div class="events">
            <div class="e1 wow fadeInUpFix" data-wow-duration="0.3s">Events</div>
            <div class="e2 wow fadeInUpFix" data-wow-duration="0.3s" data-wow-delay="0.05s">APPLICATION BAUMA 2022</div>
            <div class="e3 wow fadeInUpFix" data-wow-duration="0.3s" data-wow-delay="0.1s">We are looking forward to meeting you!</div>
            <div class="divider wow fadeInUpFix" data-wow-duration="0.3s" data-wow-delay="0.15s"></div>
            <div class="e4 wow fadeInUpFix" data-wow-duration="0.3s" data-wow-delay="0.2s">
                Erat odio laoreet mi ornare feugiat felis eget morbi convallis. Risus, adipiscing neque tristique tellus donec egestas elementum eget at. Quis risus lectus viverra semper. Facilisis ut vitae, vestibulum mauris.
            </div>
        </div>
        <a href="javascript:void(0);" id="to_top"><img src="{pboot:sitetplpath}/images/up.png" alt="" /></a>
    </section>
</div>
{include file=comm/foot.html}

<script>
    //价值
    $(window).load(function () {
        var swiperCompany = new Swiper("#swiper-company", {
            pagination: {
                el: ".swiper-pagination-company"
            },
            loop: true
        });
        var swiper = new Swiper('#Advantage',{
            speed: 900,
            parallax: true,
            nested: true,
            resistanceRatio: 0,
            watchSlidesProgress: true,
            loop: true,
            slidesPerView: "auto",
            navigation: {
                nextEl: "#advantage-r",
                prevEl: "#advantage-l"
            }
        });
    })
    //跳转到顶部
    $("#to_top").click(function () {
        $('body,html').animate({scrollTop:0},500);
        return false;
    });
    var options = {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
    };
    //目标元素的ID 滚动开始的数字 滚动结束的数字 完成整个效果的时间
    var num1 = new CountUp('num1', 0, 2006, 0, 1.5, {
        useEasing: true,
        useGrouping: true,
        separator: '',
        decimal: '.',
    });
    if (!num1.error) {
        num1.start();
    } else {
        console.error(num1.error);
    }
    //目标元素的ID 滚动开始的数字 滚动结束的数字 完成整个效果的时间
    var num2 = new CountUp('num2', 0, 40, 0, 1.5, options);
    if (!num2.error) {
        num2.start();
    } else {
        console.error(num2.error);
    }
    //目标元素的ID 滚动开始的数字 滚动结束的数字 完成整个效果的时间
    var num3 = new CountUp('num3', 0, 12000, 0, 1.5, options);
    if (!num3.error) {
        num3.start();
    } else {
        console.error(num3.error);
    }
    //目标元素的ID 滚动开始的数字 滚动结束的数字 完成整个效果的时间
    var num4 = new CountUp('num4', 0, 400, 0, 1.5, options);
    if (!num4.error) {
        num4.start();
    } else {
        console.error(num4.error);
    }
</script>
